<template>
  <div>
    <el-dialog
      v-model="state.centerDialogVisible"
      title="任务督办审核"
      width="50%"
      align-center
      class="dialogStyle"
      @open="openHandler"
      @close="handleClose"
      
    >
      <el-form
        ref="formRef"
        :model="formInline"
        :rules="rules"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="项目名称">
          <el-input
            disabled
            v-model="formInline.projectName"
            placeholder="项目名称"
          />
        </el-form-item>
        <el-form-item label="任务名称">
          <el-input
            disabled
            v-model="formInline.taskName"
            placeholder="任务名称"
          />
        </el-form-item>
        <el-form-item label="任务代码">
          <el-input
            disabled
            v-model="formInline.taskCode"
            placeholder="任务代码"
          />
        </el-form-item>
        <el-form-item label="是否里程碑">
          <el-radio-group v-model="formInline.isMilestone" disabled>
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="计划开始时间" class="twoline">
          <el-date-picker
            disabled
            v-model="formInline.planStartTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择计划开始时间"
          />
        </el-form-item>
        <el-form-item label="计划结束时间" class="twoline">
          <el-date-picker
            disabled
            v-model="formInline.planEndTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择计划结束时间"
          />
        </el-form-item>
        <el-form-item label="处理部门">
          <el-input
            disabled
            v-model="formInline.responsibleDepartmentName"
            placeholder="处理部门"
          />
        </el-form-item>
        <el-form-item label="处理人">
          <el-input
            disabled
            v-model="formInline.responsibleUserName"
            placeholder="处理人"
          />
        </el-form-item>
        <p class="oneline" style="font-size: 12px; color: '#ccc'">延期情况说明</p>
        <!-- <el-form-item  label="审核部门" prop="auditDepartmentId">
          <el-select
          disabled
            v-model="formInline.auditDepartmentId"
            value-key=""
            placeholder=""
            clearable
            @change="changeDepartment"
          >
            <el-option
              v-for="item in state.departmentOptions"
              :key="item.departmentId"
              :label="item.departmentName"
              :value="item.departmentId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核人" prop="auditUserId">
          <el-select
            v-model="formInline.auditUserId"
            value-key=""
            disabled
            placeholder=""
            clearable
            filterable
          >
            <el-option
              v-for="item in state.userOptions"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
  
        <el-form-item label="备注" class="oneline" prop="remark">
          <el-input disabled v-model="formInline.remark" show-word-limit type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.centerDialogVisible = false" class="button_cancel2">取消</el-button>
          <el-button @click="submitHandler(2)" class="button_view"> 审核 </el-button>
          <el-button @click="submitHandler(3)" class="button_view"> 驳回 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  </template>
  <script setup>
  import upload from '@/components/uploadCom/upload.vue'
  import { ref, reactive, onMounted } from 'vue'
  import { taskSupervise, department } from '@/api/project'
  
  import { ElDialog, ElForm, ElMessage, ElFormItem } from 'element-plus'
  
  const formInline = reactive({})
  const state = reactive({
    projectTaskId: '',
    centerDialogVisible: false,
    projectRow: {},
    userOptions: [],
    departmentOptions: []
  })
  const rules = {
    auditDepartmentId: [
      { required: true, message: '请选择审核部门', trigger: 'blur' }
    ],
    auditUserId: [{ required: true, message: '请输入审核人', trigger: 'blur' }],
    remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
  }
  //弹框打开前的回调
  const openHandler = async () => {
    await taskSupervise.getInfo(state.projectTaskId).then((res) => {
      if (res.code == '200') {
        let obj = { ...res.data, ...state.projectRow }
  
        for (const key in obj) {
          formInline[key] = obj[key] || ''
        }
        console.log(formInline)
      }
    })
  }
  const emits = defineEmits(['refreshList'])
  //弹框关闭
  const handleClose=()=>{
    
    for (const key in formInline) {
      formInline[key]=''
    }
    emits('refreshList')
  }
  //获取所有部门信息
  const getdepartmentList = () => {
    department.getAllDepartments().then((res) => {
      state.departmentOptions = res?.data || []
    })
  }
  //通过部门ID获取人员
  const getUserByDepartment = (id) => {
    department.getUserByDepartmentId(id).then((res) => {
      state.userOptions = res?.data || []
    })
  }
  //部门变化拉去人员信息
  const changeDepartment = (val) => {
    console.log(val)
    getUserByDepartment(val)
  }
  const formRef = ref(null)
  //上报提交
  const submitHandler = (e) => {
    formRef.value.validate(async (valid, fields) => {
      if (valid) {
        await taskSupervise
          .audit({
            projectTaskId: formInline.projectTaskId,
            auditStatus: e,
            // remark: formInline.remark
          })
          .then((res) => {
            if (res.code == '200') {
              state.centerDialogVisible = false
              ElMessage.success('上报成功')
            }
          })
      }
    })
  }
  defineExpose({
    state
  })
  onMounted(() => {
    //获取部门
    getdepartmentList()
  })
  </script>
 <style lang="scss" scoped>
 @import '@/views/constructionProjectManage/static/dialog.scss';
 </style>
  